<template>
    <div class="e-form">
        <BillTop @cancel="printHandel"></BillTop>
        <div class="tabs">
            <div class="tabs-title">基本信息</div>
            <!-- {{webData}} -->
                <el-form ref="form" :model="formData" label-width="160px" >
                <el-row>
                    <el-col :span="12">
                         <el-form-item label="结算编号：" >
                            {{formData.billNo}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="机构：" >
                            {{formData.orgName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="结算单位：" >
                            {{formData.settleOrgName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="源单编号：">
                              {{formData.sourceNo}}
                        <span class="a"
                        @click="seeSourceOrder">查看</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                           <el-form-item label="税率%：" >
                            {{formData.taxRate}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                          <el-form-item label="经办人：" >
                            {{formData.operatorName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                         <el-form-item label="税额(元)：" >
                            {{formData.taxAmount}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结算日期：" >
                           {{formData.settleDate}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="结算金额(元)：" >
                             {{formData.settleAmount}}
                        </el-form-item>
                    </el-col>
                       <el-col :span="12">
                           <!-- 此属性为计算出的结果 -->
                        <el-form-item label="税价合计(元)：" >
                           {{settleAmountData}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="累计结算金额：">
                          {{formData.totalSettleAmount}}
                        </el-form-item>
                    </el-col>
                     <el-col :span="12">
                        <el-form-item label="币种：" >
                           {{formData.currency}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="传财务共享：">
                            {{shareLable(formData.isSharing)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="本位币：" >
                            {{formData.baseCurName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="本位币汇率：">
                            {{formData.baseCurRate}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="人名币汇率：" >
                            {{formData.rmbRate}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="结算金额(本位币)：">
                           {{baseCurSettleAmount}}
                        </el-form-item>
                    </el-col>
                     <el-col :span="12">
                        <el-form-item label="状态：">
                           {{stateLable(formData.state)}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：">
                            <el-input placeholder="" v-model="formData.remarks" class="input-with-select" type="textarea"
                            :rows="3">
                            <span>
                                {{formData.remarks}}
                            </span>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="buttons">
             <el-button
                type="primary"
                size="small"
                class="btn-blue"
                @click="preserve"
                v-debounce
                >保存</el-button
            >
            <el-button size="small" @click="printHandel"  v-debounce>取消</el-button>
        </div>
    </div>
</template>

<script>
import request from '@/api/settlementManagement/weeklyMaterialSettlement/internalRentTransferSettlement'
import { mapState } from 'vuex'
import { openAppClient } from '@/utils/common'
export default {
    data () {
        return {
            formData: {},
            // isFontColor: true, //传输财务共享颜色  未传，返回修改 红色   财务共享审核中，已传 绿色
            webData: ''
        }
    },
    computed: {
        ...mapState({
            shareFrom: state => state.equip.equipData.shareFrom,
        }),
        //状态
        stateLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value == param)
                return (obj ?  obj.label :  '')
            }
        },
        //传输财务共享
        shareLable () {
            return param=> {
                const state = this.shareFrom
                const obj = state.find(x=>x.value === param)
                return (obj ?  obj.label :  '')
            }
        },
        billId () {
            return this.$route.query.billid
        },
        //税价合计
        settleAmountData () {
            return  (this.formData.settleAmount * 1 + this.formData.taxAmount * 1).toFixed(2) * 1
        },
        //结算金额（本位币）
        baseCurSettleAmount () {
            return (this.formData.settleAmount  * this.formData.baseCurRate).toFixed(2) * 1
        }
    },
    components: {
    },
    created () {
        this.initRedData()
    },
    mounted () {
    },
    methods: {
        //初始化红单信息
        initRedData () {
            request.adoptIdInitRed({ billId: this.billId })
                .then(res=>{
                    this.webData = res
                    this.formData = res
                })
        },
        //保存
        preserve () {
            this.formData.redState = 3
            request.addInternalRentTransferData(this.formData).then(res=>{
                this.clientPop('info', '保存成功!是否进行下一步操作？', ()=>{
                    this.$router.push({
                        path: '/internalRentTransferSettlementRed',
                        query: {
                            billid: res,
                        }
                    })
                },
                null,
                this.printHandel
                )
            })
        },
        //操作成功后返回列表页面
        printHandel () {
            this.$router.replace('/internalRentTransferSettlementList')
        },
        //查看源单页面
        seeSourceOrder () {
            openAppClient(
            `/revolveInternalLeaseTransferShow?billid=${this.formData.sourceId}&isview=true`, '查看内租调动页面'
            )
        },
    },
    watch: {
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
</style>
